<template>
  <view class="container">
    <view class="search">
      <view class="left-icon"><uni-icons class="icon" color="#a1a0a0" type="left" size="20"></uni-icons></view>
      <view class="icon-input">
        <uni-icons class="icon" color="#a1a0a0" type="search" size="20"></uni-icons>
        <input placeholder="输入关键字搜索产品/供应商" placeholder-class="input" v-model="keyword" />
      </view>
      <view class="btn" @click="saveLog(keyword)">搜索</view>
    </view>
    <view class="module">
      <view class="title">
        历史记录
        <image src="https://m.nocexpo.com/statics/js/modules/h5/img/del.svg" mode="widthFix" />
      </view>
      <view class="data">
        <view id="" class="item"
              v-for="(item,index) in selects.keyList" :key="index" :class="{active:item.active==true}"
              @click="changeOption('proClassifyList',item)">{{item.name}}</view>
      </view>
    </view>
    <view class="module">
      <view class="title">
        产品分类
        <image src="https://m.nocexpo.com/statics/js/modules/h5/img/del.svg" mode="widthFix" />
      </view>
      <view class="data">
        <view id="" class="item"
              v-for="(item,index) in selects.proClassifyList" :key="index" :class="{active:item.active==true}"
              @click="changeOption('proClassifyList',item)">{{item.name}}</view>



      </view>
    </view>
  </view>
</template>

<script>
import request from '@/utils/request/index.js';

export default {
  mounted(option){
    this.login();
    this.searchType();
    this.searchkeyList();
  },
  data() {
    return {
      keyword:"",
      selects:{
        keyList: [],
        proClassifyList: [],

      }

    };
  },
  methods: {
    changeOption(type,item){
      let list = this.selects[type];
      if (item.active) {
        item.active = !item.active;
      } else {
        item.active = true;
      }
      console.log("我要跳转");
      uni.navigateTo({
        //其中 /pageApps/live/liveList是跳转的子页面的路径，?后的是传递的参数
        url: `/pages/product/concentration/concentration?id=111`
      })

    },searchType(){
      let url ="/h5/searchproductclassify/searchProClaList";
      request.request({url:url,data:{exhibitionId:0}}).then(e=>{
        this.selects.proClassifyList=[];
        if(e.data && e.data.code===0 ){
          e.data.list.forEach(e=>{
            this.selects.proClassifyList.push({code:e.id,name:e.className,active:false});
          });
        }
      });
    },searchkeyList(){
      let url ="/h5/searchkey/searchkeyList";
      request.request({url:url,data:{}}).then(e=>{
        this.selects.keyList=[];
        if(e.data && e.data.code===0 ){
          e.data.list.forEach(e=>{
            this.selects.keyList.push({code:e.keyword,name:e.keyword,active:false});
          });
        }
      });
    },saveLog(keyword){
      request.request({url: '/h5/searchkey/save',
        data: {
          keyword: keyword,
          type:1
        }}).then(e=>{
        uni.navigateTo({
          //其中 /pageApps/live/liveList是跳转的子页面的路径，?后的是传递的参数
          url: `/pages/product/concentration/concentration?search=${keyword}`
        })

      });
    },login(){
      request.request({url:'/h5/login/getCurrentUser',data:{},method:"GET"}).then(e=>{
        this.selects.keyList=[];
        if(e.data && e.data.code===0 ){
          e.data.list.forEach(e=>{
            this.selects.keyList.push({code:e.keyword,name:e.keyword,active:false});
          });
        }
      });

    }

  }
};
</script>

<style lang="scss">
.container {
  background-color: #fff;
}
.search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 100rpx;
  overflow: hidden;
  background: #fff;
  margin-bottom: 50rpx;
  .left-icon {
    height: 100%;
    padding: 0px $interval-min;
  }
  .icon-input {
    flex: 1;
    display: flex;
    align-items: center;
    height: 68rpx;
    background: #f7f7f7;
    border-radius: 35rpx;
    .icon {
      margin-left: 25rpx;
      margin-right: 18rpx;
    }
    input {
      flex: 1;
      color: $text-color;
    }
    .input {
      color: #a1a0a0;
    }
  }
  .btn {
    height: 100%;
    color: $color-primary;
    font-size: $font-size + 2;
    padding: 0px $interval;
  }
}
.module {
  padding: 0px $interval;
  margin-bottom: 94rpx;
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: $font-size-max + 2;
    margin-bottom: 18rpx;
    image {
      width: 28rpx;
    }
  }
  .data{
    display: flex;
    flex-wrap: wrap;
    .item{
      color: $text-color-grey;
      padding: 0px 18rpx;
      line-height: 56rpx;
      background: #F7F7F7;
      border-radius: 28rpx;
      margin-right: 16rpx;
      margin-bottom: 16rpx;
    }.active{
       background: #ecf8f8;
       color: $color-primary;
     }
  }
}
</style>

